<include file="Public:head" />
<link href="__PUBLIC__/css/map.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<style>
    body{background: #FFF}
    .map_link a{
	background:green;
	padding:2px 5px;
	color:#FFF;
	text-decoration:none;
}
.map_link a:hover{
	background:green;
}
.baidu_board{
	width:600px;
}
.baidu_board td img{
	width:200px;
}
    </style>
<div id="map_js" style="position:absolute;left:-30000px;">{$maps_data_str}</div>
<div class="fl side">
    <div class="side-nav clearfix">
        <a class="cur" href="map-dl">默认</a>
        <a href="map-ob5-ad0#r">
            预订折扣
            <i class="up"></i>
        </a>
        <a href="map-ob2-ad1#r">
            评分
            <i class="down"></i>
        </a>
        <a class="last" href="map-ob3-ad1#r">
            人均
            <i class="down"></i>
        </a>
    </div>
    <div class="side-switch-btn on"></div>
    <div id="sideList" class="sideList">
        <ul>
            <li>
                <div class="border">
                    <i class="tag">1</i>
                    <div class="listCont">
                        <div class="clearfix mb10">
                            <a class="fl" title="桂月楼饭店" href="/shop/55905.html" target="__blank">桂月楼饭店</a>
                            <span class="fr c-t-s">￥50.0</span>
                        </div>
                        <div class="clearfix">
                            <div class="fl">
                                <label class="c-t-s"> 川菜 </label>
                                <i class="c-t-s"> | </i>
                                <span class="c-t-i">9.0折</span>
                            </div>
                            <div style="float: right">{$star=4|getStar=###}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="cur sys">
                <div class="border">
                    <i class="tag">1</i>
                    <div class="listCont">
                        <div class="clearfix mb10">
                            <a class="fl" title="桂月楼饭店" href="/shop/55905.html" target="__blank">桂月楼饭店</a>
                            <span class="fr c-t-s">￥50.0</span>
                        </div>
                        <div class="clearfix">
                            <div class="fl">
                                <label class="c-t-s"> 川菜 </label>
                                <i class="c-t-s"> | </i>
                                <span class="c-t-i">9.0折</span>
                            </div>
                            <span class="idx-rate idx-rate-50 fr"></span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>
    <div id="map" class="map" style="overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left; height: 629px;">
    <div style="width: 960px; height: 500px; border: 1px solid gray; margin-top:10px;" id="container"></div>
    </div>
    <div class="clearfix"></div>
    <script type="text/javascript">
	var map = new BMap.Map("container"); // 创建Map实例
	var point = new BMap.Point(118.77277, 32.046856); // 创建点坐标
	map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别。
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());
	map.setCurrentCity("南京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
	map.enableScrollWheelZoom(); //启用滚轮事件
	/*
	 *标注多个点 
	 *data为传递的字符串，格式为[[编号1,类型1,x1,y1],[编号2,类型2,x2,y2]]
	 */
	function multiMark(data) {
		map.clearOverlays();
		var obj = eval(data);
		//循环添加标注
		for ( var i = 0; i < obj.length; i++) {
			var point = new BMap.Point(obj[i][3], obj[i][4]);
			 var myIcon = new BMap.Icon("http://localhost/meal/Public/images/mark.png",new BMap.Size(32, 32));
                            var marker = new BMap.Marker(point, {icon: myIcon});
                            marker.setZIndex(i);
                            map.addOverlay(marker);
                            marker.addEventListener("click", function(){     
                            var i=this.zIndex 


			   var sContent="<table class='baidu_board' style='width:500px; height:135px;'><tr><td>";
			   //公司名称
			   sContent+="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+obj[i][1]+"</h4>";
			      sContent+="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+obj[i][5]+"</h4>";
			   //地址
			   sContent+="<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+obj[i][6]+"</p>";
			   sContent+="<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+obj[i][7]+"</p></td>";
			   	//图片
				if(obj[i][2]!=''){
				sContent+="<td rowspan='2'>";
			    sContent+="<a href='http://localhost/meal/"+obj[i][2]+"' target='_blank'><img style='float:right;margin:4px; width:140px;' id='imgDemo' src='http://localhost/meal/"+obj[i][2]+"\' /></a>"
			   	sContent+="</td>";
				}				
				//按钮
				
    			sContent+="</tr></table>";
				// 创建信息窗口对象
				var infoWindow = new BMap.InfoWindow(sContent);  
  				this.openInfoWindow(infoWindow);

}); 

			var result = BMapLib.GeoUtils.isPointInRect(point, map.getBounds());
			while (!result) {
				map.setZoom(map.getZoom() - 1);
				result = BMapLib.GeoUtils.isPointInRect(point, map.getBounds());
			}
		}
	}
               var maps_str=document.getElementById("map_js").innerText;
	multiMark(maps_str);
</script>
<include file="Public:foot" />